<template>
	<view class="content"
		:style="'background: url('+ c_imgPath + 'indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">
		<view class="xietiao" :style="'background: url('+ c_imgPath +'vip/vip_bg.png'+ ') no-repeat 0 0 / 100% 100%;'">
			<view class="header_user">
				<view class="jp_headimg">
					<image :src="userinfo.headimg" class="headimg"></image>
				</view>
				<view>{{userinfo.nickname}}</view>
			</view>
			<!-- <view class="header_bot">VIP{{userinfo.vip}}</view> -->
			<view class="head_gailv">
				<cmd-progress :percent="gailv" :show-info="false" stroke-color="#968EB9"
					:strokeWidth="8" :is_img="false">
				</cmd-progress>
			</view>
			<view class=""></view>
			<view class="jifen">距离升级还需要消耗{{userinfo.upgrade_money}}</view>
		</view>
		
		<view class="title">
			<image :src="c_imgPath+'vip/title.png'"></image>
		</view>
		
		<view class="allBox">
			<view class="coupon_item" v-for="(item,index) in config" :key="index">
				<view class="item_left">
					<image :src="c_imgPath+'vip/huiyuan.png'"></image>
					<view class="item_left_title">{{item.title}}</view>
				</view>
				<view class="coupon_r ">
					<!-- <view>{{item.title}}</view> -->
					<view>获得条件：累计消费{{item.condition}}</view>
					<view v-if="item.notice">权益说明：{{item.notice}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				z_imgPath: this.$z_img + 'mine/vip/',
				c_imgPath:'https://qt.yhemall.com/mine/',
				userinfo: {},
				config: {},
				show: 0,
				type: '',
				gailv:0
			}
		},
		onLoad(e) {
			this.getData()
		},
		methods: {

			getData() {
				// 模拟接口
				let that = this;
				that.req({
					url: 'vip_list',
					Loading: true,
					success(res) {
						that.userinfo = res.data.userinfo;
						that.config = res.data.data;
						that.gailv =100 - (that.userinfo.upgrade_money / that.config[that.userinfo.vip].condition ) * 100;
						that.gailv.toFixed(2);
					}
				})
			},


		}
	}
</script>

<style lang="scss">
	.title{
		text-align: center;
		margin: 30rpx 0;
		image{
			width: 266rpx;
			height: 27rpx;
		}
	}
	
	
	.footer {
		width: 702rpx;
		height: 88rpx;
		background: #FF5029;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 32rpx;
		position: fixed;
		bottom: 57rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.wenben>view:nth-of-type(1) {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}

	.wenben {
		font-size: 24rpx;
		color: #999999;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.coupon_r>view:nth-of-type(2),
	.coupon_r>view:nth-of-type(3) {
		font-size: 26rpx;
		color: #FFFFFF;
		margin-top: 6rpx;
		opacity: .4;
	}

	.coupon_r>view:nth-of-type(1) {
		// font-size: 32rpx;
		/* font-family: 'zcq'; */
		color: #FFFFFF;
	}


	// .coupon_item>image {
	// 	width: 85rpx;
	// 	height: 85rpx;
	// 	margin-right: 16rpx;
	// }

	.coupon_item {
		position: relative;
		box-sizing: border-box;
		padding: 30rpx 0;
		margin: 20rpx auto 0;
		font-size: 28rpx;
		color: #FFFFFF;
		width: 690rpx;
		background-color: #0A091A;
		display: flex;
		align-items: center;
		.item_left{
			padding: 0 50rpx;
			border-right: 1px solid #CCCCCC;
			text-align: center;
			image{
				width: 68rpx;
				height: 68rpx;
			}
			.item_left_title{
				background: linear-gradient(90deg, #D8D2FF 0%, #7C37DB 100%);
				border-radius: 16rpx;
				font-size: 26rpx;
				width: 110rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				margin-top: 10rpx;
			}
		}
		.coupon_r{
			margin-left: 20rpx;
			font-size: 26rpx;
		}
	}


	.coupon_head {
		width: 372rpx;
		height: 71rpx;
		margin: 70rpx auto 0;
		display: block;
	}

	.allBox {
		width: 750rpx;
		/* box-shadow: 0px 3rpx 0px 0px #C8CBD3; */
		/* border-radius: 40rpx 40rpx 0px 0px; */
		/* border-top: 2rpx solid #C8CBD3; */
		/* transform: translateY(-4rpx); */
		/* background-color: #222222; */
	}

	.header_user>view:nth-of-type(2)>view:nth-of-type(2) {
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.header_user>view:nth-of-type(2)>view:nth-of-type(1) {
		margin-left: 20rpx;
		font-size: 36rpx;
		text-shadow: 0px 0px 10px rgba(255, 150, 254, 0.7);
	}
	.head_gailv{
		padding:0 37rpx;
	}
	.header_user {
		display: flex;
		align-items: center;
		margin-left: 37rpx;
		padding: 25rpx 0;
	}



	.header_bot {
		font-size: 40rpx;
		text-align: center;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		color: #FFFFFF;
	}

	.xietiao {
		width: 690rpx;
		height: 260rpx;
		color: #FFFFFF;
		margin: 0 auto;
		position: relative;
	}

	.jifen {
		position: absolute;
		bottom: 23rpx;
		left: 51rpx;
		font-size: 24rpx;
		color: #fff;
		opacity: .6;
	}

	.jp_headimg>image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.content {
		width: 100vw;
		min-height: 100vh;
		padding-top: 1rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;
	}
</style>
